-
-
Notifications
You must be signed in to change notification settings - Fork 138
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor Styling #140
Merged
Merged
Refactor Styling #140
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Allow selectors in selectors and media queries - Don't require ampersend for sub selectors
- Allow infinite nesting of CSS blocks (media queries, selectors) - Implement algorithm for processing CSS blocks - Implement compiler for processed CSS blocks
The |
They are evaluated at runtime into a CSS Variable this is an example of a compiled |
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the improvements and refactoring for the
style
tag. The related issue is #128#{...}
from{...}
if
available instyle
case
available instyle
style
Breaking changes
The ampersand
&
is no longer required for sub selectors. It is still required for pseudos. This was a mistake in my part in the first place, it just made it harder to understand what is going on. It was meant to be compatible with the CSS3 Nesting Module which is still in draft state (after many years).This way it's more understandable and more compatible with preprocessors like SASS.
CSS interpolation is now
#{...}
instead of{...}
. This change was needed for two reasons:a:hover {...}
vsdisplay: {...};
)), the ampersand&
for the selectors was a solution for this but since it was removed for more clarity we need to prefix it.New features
Selectors and media queries can be nested infinitely (even in each other). In the past it was not possible to nest media queries and selectors or even selectors in selectors, this is now possible:
The example above will compile to:
Sub selectors will use the descendant operator and media queries will be combied using the
and
keyword.if
andcase
can be used inside style tags (in selectors and media queries as well). You can use them to apply styles conditionally:The
else
branch can be omitted in this case.multiple styles can be added to the same element, they are applied in order:
arguments can now be specified for
style
blocks: